<template>
  <div id="searchPage">
    <c-title :hide="false" text="搜索"></c-title>
    <div class="head">
      <div class="inpbox">
        <i class="iconfont icon-sousuo1" @click.stop="goSearch"></i>
        <input type="text" placeholder="搜索吃喝玩乐" v-model="keyWord" @keydown.enter="goSearch" />
      </div>
    </div>
    <div class="contenBox">
      <!-- 最近搜索 -->
      <div class="recent" v-if="searchHistory.length > 0">
        <div class="recent_top">
          <span>搜索历史</span>
          <icon class="iconfont icon-ht_operation_delete" @click="deleHistory"></icon>
        </div>
        <div class="recent_conten">
          <block v-for="(item, index) in searchHistory" :key="index">
            <div class="recent_lis" @click="tapKeyWord(item.name)">{{ item.name }}</div>
          </block>
        </div>
      </div>
      <van-empty description="描述文字" v-else />
    </div>
  </div>
</template>
<script>
import tourSearch from "./tourSearch.js";
export default tourSearch;
</script>
<style scoped>
.inpbox::v-deep .van-cell {
  background: transparent;
  padding: 0;
}
</style>
<style lang="scss" scoped>
/* packageI/searchPage/searchPage.wxss */

#searchPage {
  background-color: #fff;
}

.head {
  width: 100%;
  // border-bottom: 0.0313rem solid #e4e4e4;
  padding: 0.9375rem 0.9375rem 0.625rem 1.125rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.inpbox {
  width: 21.4375rem;
  height: 1.9375rem;
  border-radius: 1.0313rem;
  background: #fff;
  border: 1px solid var(--themeBaseColor);
  display: flex;
  align-items: center;
}

.head span {
  font-size: 0.875rem;
  margin-left: 0.6875rem;
}

.inpbox {
  .iconfont {
    margin-left: 1.0625rem;
    margin-right: 0.4375rem;
    color: var(--themeBaseColor);
  }

  input {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
  }
}

.contenBox {
  padding: 0.875rem 0.9375rem 0.625rem 1.0625rem;
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
}

.recent_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 400;

  span {
    font-size: 0.8125rem;
  }
}

.recent .head_top span {
  font-size: 0.875rem;
}

.recent_conten {
  display: flex;
  align-items: center;
  margin-top: 0.7813rem;
  flex-wrap: wrap;
}

.recent_lis {
  padding: 0.1563rem 0.6875rem;
  background-color: #f9f9f9;
  border-radius: 0.7813rem;
  margin-right: 0.625rem;
  margin-top: 0.7813rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 搜素发现 */

.recent {
  margin-bottom: 2.3125rem;
}

.discover_conten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.discover_lis {
  padding: 0.1563rem 0.6875rem;
  background: #f9f9f9;
  border-radius: 0.7813rem;
  margin-right: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  margin-top: 0.7813rem;

  .hot_logo_more {
    color: #9b9b9b;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
  }
}

.hot {
  color: #c23b38;
}

.hot_logo {
  /* background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img/icon_hot@2x.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  width: 0.9375rem;
  height: 0.9375rem;
  margin-left: 0.375rem;
}

/* 热门搜索 */

.discover {
  margin-bottom: 2.4688rem;
}

.popular_conten {
  display: flex;
  align-items: center;
  margin-top: 0.7813rem;
}

.popular_left {
  width: 2.8125rem;
  height: 2.8125rem;
  border-radius: 0.125rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.popular_right {
  flex: 1;
  margin-left: 0.5938rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

#searchPage {
  height: 100%;
  background-color: #fff;
}

.popular_right {
  .title {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    text-align: left;
  }

  .detail {
    font-size: 0.75rem;
    color: #9b9b9b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }
}
</style>
